<template>
  <t-dialog header="新增部门" :visible.sync="visiable" :confirmOnEnter="true" @close="closeAddDialog"
    @confirm="saveProject">
    <t-space direction="vertical" style="width: 100%">
      <!-- rule:绑定表单每一项的校验规则 -->
      <t-form :data="addFormData" labelWidth="calc(8em + 24px)" layout="vertical" :rules="addFormRule"
        ref="nusrong_plan_form" @reset="onReset" @submit="saveProjectToDB">
        <t-form-item label="上级部门" name="parentDeptNo">
          <t-tree-select :data="options" clearable valueType="object" placeholder="请输入上级部门" @change="changeSelect" />
        </t-form-item>
        <t-form-item label="部门名称" name="deptName">
          <t-input v-model="addFormData.deptName" placeholder="请输入部门名称"></t-input>
        </t-form-item>
        <t-form-item label="排序" name="sortNo">
          <t-input v-model="addFormData.sortNo" type="number" placeholder="请输入部门名称"></t-input>
        </t-form-item>
        <t-form-item label="部门状态" name="data_status">
          <t-radio-group v-model="addFormData.dataState">
            <t-radio :checked="true" value="0">启用</t-radio>
            <t-radio :checked="false" value="1">禁用</t-radio>
          </t-radio-group>
        </t-form-item>
        <t-form-item label="部门负责人" name="leaderId">
          <t-select v-model="addFormData.leaderId">
            <t-option key="apple" :label="item.realName + parseNumber(item.id)" v-for="item in users"
              :key="parseNumber(item.id)" :value="item.id" />
          </t-select>
        </t-form-item>
        <t-form-item label="部门说明" name="remark">
          <t-textarea v-model="addFormData.remark" placeholder="部门说明" maxlength="300"></t-textarea>
        </t-form-item>
      </t-form>
    </t-space>
  </t-dialog>
</template>
<script setup lang="js">
import { ref, onMounted, watch } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import { getSecondDepts, getUsers, saveDept } from '@/api/dept_api'
import Decimal from 'decimal.js'
const props = defineProps(['visiable'])
const emit = defineEmits(['closeAddDialog', 'refresh'])

const addFormData = ref({
  parentDeptNo: '',
  deptName: '',
  sortNo: '',
  dataState: '',
  leaderId: '',
  remark: ''
})
const projectList = ref([])
// 表单对象
const nusrong_plan_form = ref(null)
// 部门选择下拉框的数据
const options = ref([])
const users = ref([])

const parseNumber = (number) => {
  return new Decimal(number)
}

const changeSelect = (value, context) => {
  addFormData.value.parentDeptNo = context.node.value
}


const closeAddDialog = () => {
  emit('closeAddDialog')
}

// 只执行一次
onMounted(() => {
  findSecondDepts()
  findAllUsers()
})

// 查询部门列表
const findSecondDepts = async () => {
  let resp = await getSecondDepts()
  options.value = resp
}
// 查询所有员工列表
const findAllUsers = async () => {
  let resp = await getUsers()
  users.value = resp
}

// 校验规则
const addFormRule = ref({
  planName: [
    {
      required: true,
      message: "护理计划名称是必填项"
    }
  ],
  sortNo: [
    {
      required: true,
      message: "排序号是必填项"
    }
  ],
  status: [
    {
      required: true,
      message: "状态是必填项"
    }
  ]
})


// 点击对话框的确定按钮，手动触发表单的提交方法
const saveProject = () => {
  nusrong_plan_form.value.submit()
}
// 保存护理计划 
const saveProjectToDB = ({ validateResult, firstError }) => {
  // true表示校验通过
  if (validateResult === true) {

    console.log("提交的数据：", addFormData.value);

    save(addFormData.value)

  } else {
    MessagePlugin.warning(firstError);
  }
}

const save = async (obj) => {
  await saveDept(obj)

  // 关闭对话框
  emit('closeAddDialog')
  // 清空数据

  // 刷新列表
  emit('refresh')
}


</script>

<style lang="css" scoped>
#cycle {
  display: inline-block !important;
}
</style>